<template>
  <div class="container flex-center">
    <div style="width: 400px">
      <el-form ref="formRef" :model="form" :rules="rules" class="demo-ruleForm" label-width="120px" status-icon>
        <el-form-item label="账号" prop="account">
          <el-input v-model="form.account" autocomplete="off" type="text" />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="form.password" autocomplete="off" type="password" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup>
const userInfo = useUserInfo()

definePageMeta({
  layout: false
})

const form = reactive({
  account: 'nuxt3',
  password: '123456789'
})

const rules = reactive({
  account: [{ required: true, trigger: 'blur', message: '账号不可为空' }],
  password: [{ required: true, trigger: 'blur', message: '密码不可为空' }]
})

const submitForm = () => {
  userInfo.login(form).then(() => {
    // 日常的导航方式仍可以使用 router.push() 等方法
    // 但 Nuxt 提供了一个兼容性更好的方法 navigateTo() [ https://nuxt.com.cn/docs/api/utils/navigate-to ]
    return navigateTo('/home')
  })
}
</script>

<style lang="scss" scoped>
.container {
  width: 100vw;
  height: 100vh;
}
</style>
